import React from 'react';
import './ContentArea.css';
import VideoCard from './VideoCard';

interface ContentAreaProps {
    currentCategory: string;
    filteredVideos: any[]; // Now directly receives filtered videos
    onRefreshContent: () => void;
    onLogout: () => void;
    onOpenVideo: (video: any) => void;
    onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onTimeFilterChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    onDurationFilterChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    onSortFilterChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
    toolbarTitle: string;
    updateTime: string;
}

const ContentArea: React.FC<ContentAreaProps> = ({
    currentCategory,
    filteredVideos, // Removed sampleVideos
    onRefreshContent,
    onLogout,
    onOpenVideo,
    onSearchChange,
    onTimeFilterChange,
    onDurationFilterChange,
    onSortFilterChange,
    toolbarTitle,
    updateTime,
}) => {
    return (
        <div className="content-area">
            <div className="toolbar">
                <div className="toolbar-left">
                    <h2>{toolbarTitle}</h2>
                </div>
                <div className="toolbar-right">
                    <span className="update-time">{updateTime}</span>
                    <button className="btn btn-secondary" onClick={onRefreshContent}>刷新</button>
                    <button className="btn btn-secondary" onClick={onLogout} title="断开连接">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                            <polyline points="16,17 21,12 16,7"/>
                            <line x1="21" y1="12" x2="9" y2="12"/>
                        </svg>
                    </button>
                </div>
            </div>

            <div className="filters">
                <input type="text" className="search-box" placeholder="搜索视频标题关键词..." onChange={onSearchChange} />
                <select className="filter-select" onChange={onTimeFilterChange}>
                    <option value="all">全部时间</option>
                    <option value="today">今天</option>
                    <option value="week">本周</option>
                    <option value="month">本月</option>
                </select>
                <select className="filter-select" onChange={onDurationFilterChange}>
                    <option value="all">全部时长</option>
                    <option value="short">短视频 (&lt;4分钟)</option>
                    <option value="medium">中等 (4-20分钟)</option>
                    <option value="long">长视频 (&gt;20分钟)</option>
                </select>
                <select className="filter-select" onChange={onSortFilterChange}>
                    <option value="newest">最新发布</option>
                    <option value="popular">最多观看</option>
                    <option value="channel">按频道</option>
                </select>
            </div>

            <div className="video-grid">
                {filteredVideos.map((video, index) => (
                    <VideoCard key={index} video={video} onOpenVideo={onOpenVideo} />
                ))}
            </div>
        </div>
    );
};

export default ContentArea;